<template>
    <div class="water-forecast-wrapper">
        <div class="water-forecast-top">
            <el-tag type="success" color="black" size="medium" effect="light">水质预测评估</el-tag>
        </div>
        <div class="water-forecast-bottom">
            <div class="water-forecast-left">
                <waterForecastitem v-for="(item,index) in option" :key="index">
                    <div slot="optionName">{{item.id}}</div>
                    <div slot="optionValue">{{item.value}}</div>
                    <div slot="optionTitle">{{item.title}}</div>
                </waterForecastitem>
            </div>
        </div>
    </div>
</template>

<script>
    import waterForecastitem from "../../../components/common/waterForecastitem";
    export default {
        name: "waterForecast",
        data(){
            return{
                option:[
                    {
                        id:"温度",
                        value:"22°C",
                        title:"合格"
                    },
                    {
                        id:"溶解氧",
                        value:"11",
                        title:"不合格"
                    },
                    {
                        id:"PH值",
                        value:"7",
                        title:"合格"
                    },
                    {
                        id:"盐度",
                        value:"22%",
                        title:"不合格"
                    },
                    {
                        id:"氨氮浓度",
                        value:"10g/ml",
                        title:"合格"
                    },
                    {
                        id:"浊度",
                        value:"11%",
                        title:"不合格"
                    },
                ]
            }
        },
        components:{
            waterForecastitem,
        }
    }
</script>

<style scoped lang="scss">
    .water-forecast-wrapper{
        height: 5.5rem;
        .water-forecast-top{
            height: 0.5rem;
        }
        .water-forecast-bottom{
            height: 3rem;
            display: flex;
            .water-forecast-left{
                flex: 1;
                display: flex;
                justify-content: space-around;
                align-items: center;
            }

        }
    }
</style>
